<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center mance_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub mance_fd0_0'>
					<view class='flex flex-wrap align-center mance_fd0_0_c0'>
						<text class='fu-iconfont2  mance_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
							data-url="1">&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='mance_fd0_0_c1_c0'>资源学习</text>
					</view>
					<view class='flex flex-wrap align-center justify-end mance_fd0_0_c0'>
					</view>
				</view>
			</view>

			<view class="overview" :style="{marginTop:(98+StatusBarRpx)+'rpx'}">
				<video id="myVideo" class="overview-video" :src="viewUrl" controls @timeupdate="onTimeUpdate"
					@play="onVideoPlay" @pause="onVideoPause" @ended="onVideoEnded"
					@loadedmetadata="onLoadedMetadata"></video>

				<view style="margin-top: 10rpx;">已观看：{{ watchedPercent.toFixed(1) }}%</view>
			</view>

		</view>
	</page-body>
</template>


<script>
	export default {
		props: {
			progressPercent: { // 上次观看进度百分比（0-100）
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				list: [],
				idList: [],
				aid: "",
				index: 0,
				viewUrl: '',
				duration: "",
				freecourseresourcelibrary_id: "",
				//---------------
				startPercent: 0, // 传入百分比，0-100
				lastTime: 0,
				watchedSeconds: 0,
				playing: false,
				maxAllowableStep: 2,
				isSeekingBack: false,
				duration: 0 // 视频总时长
			};
		},
		onLoad(options) {
			this.viewUrl = options.url
			this.freecourseresourcelibrary_id = options.aid
			this.startPercent = options.rate
			console.log('999999999999', options)
		},
		computed: {
			watchedPercent() {
				if (!this.duration) return 0;
				return (this.watchedSeconds / this.duration) * 100;
			}
		},
		mounted() {},
		onUnload() {
			// 把记录传给后端
			this.get_course_chapterApi();
		},
		methods: {
			onLoadedMetadata(e) {
				this.duration = e.detail.duration || 0;

				if (this.duration && this.startPercent > 0 && this.startPercent <= 100) {
					const startTime = Math.max((this.duration * this.startPercent) / 100, 1);

					const videoContext = uni.createVideoContext('myVideo', this);
					this.isSeekingBack = true;
					videoContext.seek(startTime);

					this.lastTime = startTime;
					this.watchedSeconds = startTime; // 初始化已观看时间为起始点
				}
			},
			onVideoPlay() {
				this.playing = true;
			},
			onVideoPause() {
				this.playing = false;
			},
			onTimeUpdate(e) {
				const currentTime = e.detail.currentTime;
				const delta = currentTime - this.lastTime;

				if (this.isSeekingBack) {
					this.isSeekingBack = false;
					this.lastTime = currentTime;
					return;
				}

				if (delta > this.maxAllowableStep) {
					console.warn(`检测到快进：跳了 ${delta.toFixed(2)} 秒，强制回退`);

					const videoContext = uni.createVideoContext('myVideo', this);
					this.isSeekingBack = true;
					videoContext.seek(this.lastTime);
					return;
				}

				if (this.playing && delta > 0 && delta < 5) {
					this.watchedSeconds += delta;
					this.lastTime = currentTime;
				}
			},
			onVideoEnded() {
				this.playing = false;
				console.log('视频播放完毕，总有效观看时长：', this.watchedSeconds.toFixed(1), '秒');
			},
			//----
			async get_course_chapterApi() {
				let res = await this.$api.post(global.apiUrls.post68dcda76dfe46, {
					resource_id: this.freecourseresourcelibrary_id,
					duration: this.watchedPercent.toFixed(1)
				})

				if (res.data.code == 1) {
					this.list = res.data.data
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.public-page-empty {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-top: 50rpx;

		image {
			width: 300rpx;
			height: 300rpx;
		}
	}

	.coursePro_flex_3 {
		width: 750rpx;
		height: 110rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background-color: #fff;

		.coursePro_fd3_0 {
			background: #145efd;
			width: 450rpx;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 30rpx;
			color: #fff;
			border-radius: 44rpx;
			margin: 0 auto
		}
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
		background-color: #F3F4F8;

	}

	.mance_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.mance_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}

	.mance_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.mance_fd0_0_c0 {
		width: 120rpx;
	}

	.mance_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.overview {
		min-height: 600rpx;
		background-color: #fff;
		width: 100%;
		overflow-y: auto;
		margin-top: 95rpx;
		padding-bottom: 25rpx;
		padding-top: 1rpx;

		.overview-video {
			width: 100%;
			height: 600rpx;
		}
	}
</style>